<template>
  <div>
    <div class="filter-container">
      <!--字典类别key搜索   @keyup.enter.native="page1SearchPageList" 表示按回车进行搜索 page1SearchPageList是搜索方法 -->
      <el-input
        v-model="search.lingypeo"
        placeholder="领用人"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <el-col :span="4">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="search.Lingytime"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-input
        v-model="search.shenpipeo"
        placeholder="审批人"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <!--搜索按钮 icon="el-icon-search" 代表按钮要显示的小图标    @click="page1SearchPageList" 代表点击执行搜索方法 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="page1SearchPageList"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="success"
        icon="el-icon-edit"
        @click="ddtCreateShow"
      >
        添加
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="danger"
        icon="el-icon-edit"
        @click="ddtCreatedelall"
      >
        批量删除
      </el-button>
    </div>

    <el-table
      ref="delalldec"
      :data="list"
      style="width: 100%"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="yongtu" label="用途描述"> </el-table-column>
      <el-table-column prop="lingypeo" label="领用人"> </el-table-column>
      <el-table-column prop="lingytime" label="领用日期"> </el-table-column>
      <el-table-column prop="beizhu" label="备注"> </el-table-column>
      <el-table-column prop="chuangjian" label="创建时间"> </el-table-column>
      <!-- <el-table-column prop="m_proposer" label="审批状态"> </el-table-column> -->
      <el-table-column prop="shenpipeo" label="审批人"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handledel(scope.row.id)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="handleClick(scope.row.id)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.maxResultCount"
      :pageSizes="[5, 10, 15, 20]"
      @pagination="searchPageList"
    />

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!--表单定义-->
      <!-- ref="dicTypeForm"   表单命名,类似于以前的id-->
      <!--:rules="rules"   对应的验证规则, rules 验证规则json 下面有定义-->
      <!--:model="adminUserInfo"   表单绑定的数据模型-->
      <!---label-width="120px" 设置标签宽度,如果不设置会产生错位问题-->
      <el-form
        ref="dicTypeForm"
        :rules="rules"
        :model="dicTypInfo"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="🍁标题">
              <el-input v-model="dicTypInfo.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="🍁用途描述">
              <el-input type="textarea" v-model="dicTypInfo.yongtu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="dicTypInfo.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="🍁输入领用物品">
              <el-input v-model="dicTypInfo.m_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addDictType() : updateDictType()"
        >
          提交
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitleupdate" :visible.sync="dialogFormVisibles">
      <el-form
        :rules="rules"
        :model="tableData"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="🍁标题">
              <el-input v-model="tableData.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="🍁用途描述">
              <el-input type="textarea" v-model="tableData.yongtu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="tableData.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDictType()"> 保存 </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>


  <script>
import {
  dttGetAlls,
  dttCreateds,
  dels,
  delAlls,
  pagesss,
  Eintyesss,
} from "@/api/system_base/stock_manager";
import Pagination from "@/components/Pagination"; // 引入分页组件

export default {
  components: { Pagination },
  data() {
    return {
      tableData: [],
      list: null, //表格绑定数据
      listLoading: true, //是否显示加载提示
      total: 0, //总行数
      search: {
        //搜索对象
        page: 1, //当前页
        maxResultCount: 5, //每页多少条
        skipCount: 0, //当前页第一条记录位置  用于abp接口
        m_name: "", //物资名称
        lingypeo: "", //  领用人
        shenpipeo: "", //  审批人
        Lingytime:""
      },
      dialogFormVisible: false, // 是否显示弹出层
      dialogTitle: "", // 弹出层标题
      dialogFormVisibles: false,
      dialogTitleupdate: "",
      dialogStatus: "1", // 等于1 表示是添加操作   不等于1 表示修改操作
      dicTypInfo: {},
    };
  },
  created() {
    this.searchPageList();
    this.resetDicinfo();
  },
  methods: {
    searchPageList() {
      // 搜索方法
      this.listLoading = true; // 显示加载效果

      this.search.skipCount =
        (this.search.page - 1) * this.search.maxResultCount;

      dttGetAlls(this.search).then((response) => {
        // 调用分页接口
        this.list = response.result.items; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.result.totalCount; // 赋值总行数
      });
    },
    page1SearchPageList() {
      // 点击搜索
      // 搜索方法
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    ddtCreateShow() {
      //弹出添加页面
      this.resetDicinfo();
      this.dialogStatus = "1"; // 等于1 表示是添加操作   不等于1 表示修改操作
      this.dialogTitle = "基本信息";
      this.dialogFormVisible = true; // 当等于true  弹出层显示
      this.$nextTick(() => {
        this.$refs["dicTypeForm"].clearValidate(); // 清理验证
      });
    },
    addDictType() {
      if(this.dicTypInfo.title=="") 
       {
         this.$message("标题不能为空");
         return;
       }
       if(this.dicTypInfo.yongtu=="") 
       {
         this.$message("用途描述不能为空");
         return;
       }
      //添加方法
      this.$refs["dicTypeForm"].validate((valid) => {
        if (valid) {
          dttCreateds(this.dicTypInfo).then((response) => {
            this.dialogFormVisible = false;
            this.searchPageList();
            this.$notify({
              title: "添加成功",
              message: "添加物资信息成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    resetDicinfo() {
      // 初始化用户对象
      this.dicTypInfo = {
        title: "",
        yongtu: "",
        beizhu: "",
      };
    },
    handledel(id) {
      if (confirm("确认删除数据吗？")) {
        dels(id).then((res) => {
          this.$message.success("删除成功");
          this.page1SearchPageList();
        });
      }
    },
    ddtCreatedelall() {
      var arid = [];
      var id = this.$refs.delalldec.selection;
      id.forEach((res) => {
        arid.push(res.id);
      });

      if (arid.length == 0) {
        this.$message("请选择要删除的数据");
        return;
      }

      if (confirm("确认要删除数据嘛？")) {
        arid.forEach((res) => {
          var dd = res;
          delAlls(dd).then((res) => {
            this.page1SearchPageList();
          });
          this.$message.success("批删成功");
        });
      }
    },
    handleClick(id) {
      this.dialogFormVisibles = true;
      pagesss(id).then((r) => {
        console.log("r", r);
        if (r.result != null) {
          var that = this;
          that.tableData = r.result;
        }
      });
    },
    updateDictType() {
      Eintyesss(this.tableData).then((r) => {
        this.dialogFormVisibles = false;
        this.searchPageList();
        this.$notify({
          title: "修改成功",
          message: "修改物资信息成功",
          type: "success",
          duration: 2000,
        });
      });
    },
  },
};
</script>

<style >
.search_input {
  width: 200px;
}
</style>